<template>
    <div class="app-container">
        <!--工具条-->
        <el-row>
            <el-col :span="24" class="toolbar">
                <el-form :inline="true" :model="filters" label-width="120px">
                    <el-form-item label="参数编码">
                        <el-input v-model="filters.paramCode" placeholder="请输入参数编码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                        <el-button type="success" icon="el-icon-plus" @click="handleAdd(true)">添加总参</el-button>
                        <el-button type="success" icon="el-icon-plus" @click="handleAdd(false)" v-if="parentCode">添加子参</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="12" style="padding-right: 5px;">
                <el-table :data="pagination.records" highlight-current-row v-loading="isLoading" border stripe :height="heightNum" @cell-click="cellMouseEnter">
                    <el-table-column type="index" label="NO" width="40" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="paramCode" label="参数编码" min-width="160" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="paramValue" label="参数值" min-width="80" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="paramNote" label="说明" min-width="120" align="center"></el-table-column>
                    <el-table-column label="操作" width="200" align="center">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(true, scope.$index, scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" icon="el-icon-delete" plain @click="handleDelete(true, scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页开始-->
                <div class="pagination" v-if='pagination.total > 0'>
                    <el-pagination layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                                   :current-page.sync="pagination.current"
                                   @current-change="handleCurrentChange"
                                   :page-size="size" :page-sizes="[10, 20, 50, 100]"
                                   :total="pagination.total" style="float:right;">
                    </el-pagination>
                </div>
                <!--分页结束-->
            </el-col>
            <el-col :span="12" style="padding-left: 5px;">
                <el-table :data="subPagination.records" highlight-current-row v-loading="isLoading" border stripe :height="heightNum">
                    <el-table-column type="index" label="NO" width="40" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="paramCode" label="参数编码" min-width="160" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="paramNameCn" label="中文名称" min-width="100" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="paramNameEn" label="英文名称" min-width="100" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="paramValue" label="参数值" min-width="80" align="center"></el-table-column>
                    <el-table-column prop="paramSort" label="排序" min-width="60" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="paramNote" label="说明" min-width="120" align="center"></el-table-column>
                    <el-table-column label="操作" width="200" align="center">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(false, scope.$index, scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" icon="el-icon-delete" plain @click="handleDelete(false, scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页开始-->
                <div class="pagination" v-if='subPagination.total > 0'>
                    <el-pagination layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                                   :current-page.sync="subPagination.current"
                                   @current-change="handleCurrentChange"
                                   :page-size="subSize" :page-sizes="[10, 20, 50, 100]"
                                   :total="subPagination.total" style="float:right;">
                    </el-pagination>
                </div>
                <!--分页结束-->
            </el-col>
        </el-row>

        <section>
            <!--新增|编辑 界面-->
            <el-dialog custom-class="col1-dialog" :title="formObj.title" :visible.sync="formObj.isVisible" :close-on-click-modal="false" @close="handleClose('dialogForm')">
                <el-form :model="formObj.formModel" label-width="140px" :rules="rules" ref="dialogForm">
                    <el-form-item label="参数编码" prop="paramCode">
                        <el-input v-model="formObj.formModel.paramCode" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="中文名称" prop="paramValueEn" v-if="!isMain">
                        <el-input v-model="formObj.formModel.paramNameCn" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="英文名称" prop="paramValueEn" v-if="!isMain">
                        <el-input v-model="formObj.formModel.paramNameEn" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="参数值" prop="paramValue">
                        <el-input v-model="formObj.formModel.paramValue" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="排序" prop="paramSort" v-if="!isMain">
                        <el-input v-model="formObj.formModel.paramSort" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="说明" prop="paramNote">
                        <el-input v-model="formObj.formModel.paramNote" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="handleClose('dialogForm')">取消</el-button>
                    <el-button type="primary" @click="handleSubmit('dialogForm')" :loading="isLoading">提交</el-button>
                </div>
            </el-dialog>
        </section>
    </div>
</template>


<script>
    import http from '../../axios/http';
    import {isNotEmpty} from "../../filter";

    export default {
        name: 'paramSetting',
        data() {
            return {
                heightNum: 0,
                filters: {
                    paramCode: ''
                },
                pagination: {
                    total: 0,
                    current: 1,
                    records: []
                },
                size: 20,
                subPagination: {
                    total: 0,
                    current: 1,
                    records: []
                },
                subSize: 20,
                isLoading: false,
                parentCode: '',

                //是否在处理主参
                isMain: true,

                formObj: {
                    isVisible: false,//界面是否显示
                    formModel: {
                        id: null,
                        paramCode: '',
                        paramNameCn: '',
                        paramNameEn: '',
                        paramValue: '',
                        paramSort: '',
                        paramNote: ''
                    }
                },
                rules: {
                    paramCode: [
                        {required: true, message: '请输入参数编号', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            //搜索-执行搜索
            handleSearch() {
                this.handleCurrentChange(1);
            },
            //搜索-总参切换每页条数
            handleSizeChange(val) {
                this.size = val;
                this.loadPagination();
            },
            //搜索-总参切换页码
            handleCurrentChange(val) {
                this.pagination.page = val;
                this.loadPagination();
            },
            //搜索-加载总参列表数据
            loadPagination() {
                const self = this;
                let params = {};
                if (isNotEmpty(this.filters.paramCode)) {
                    params['paramCode'] = this.filters.paramCode;
                }
                self.isLoading = true;
                http.get("api/sysParam/mainPage", {params: params}).then(response => {
                    this.isLoading = false;
                    response.page = response.number + 1;
                    this.pagination = response;
                });
                this.subPagination = [];
                this.parentCode = null;
            },
            //搜索-子参切换每页条数
            handleSubSizeChange(val) {
                this.size = val;
                this.loadSubPagination();
            },
            //搜索-子参切换页码
            handleSubCurrentChange(val) {
                this.subPagination.page = val;
                this.loadSubPagination();
            },
            //搜索-加载子参列表数据
            loadSubPagination() {
                const self = this;
                let params = {};
                if (isNotEmpty(this.parentCode)) {
                    params['parentCode'] = this.parentCode;
                }
                self.isLoading = true;
                http.get("api/sysParam/subPage", {params: params}).then(response => {
                    this.isLoading = false;
                    response.page = response.number + 1;
                    this.subPagination = response;
                });
            },

            //点击单元格事件，查询对应的子参列表
            cellMouseEnter(row, column, cell, event) {
                this.parentCode = row.paramCode;
                this.loadSubPagination();
            },

            //总参-打开新增界面
            handleAdd(isMain) {
                this.formObj = {
                    isVisible: true,
                    title: '新增',
                    formModel: {
                        id: null,
                        paramCode: '',
                        paramNameCn: '',
                        paramNameEn: '',
                        paramValue: '',
                        paramSort: '',
                        paramNote: ''
                    }
                };
                this.isMain = isMain;
            },
            //总参-打开编辑界面
            handleEdit(isMain, index, row) {
                this.formObj = {
                    isVisible: true,
                    title: '编辑',
                    formModel: Object.assign(this.formObj.formModel, row)
                };
                this.isMain = isMain;
            },
            //总参-删除行
            handleDelete(isMain, index, row) {
                this.$confirm('确认删除？', '提示', {
                    type: 'warning'
                }).then(() => {
                    http.delete("api/sysParam/" + row.id).then(response => {
                        if (response.code === 200) {
                            if (isMain) {
                                this.loadPagination();
                            } else {
                                this.loadSubPagination();
                            }
                        } else {
                            this.$alert(response.msg, '提示', {type: 'warning'});
                        }
                        this.isLoading = false;
                    });
                })
            },
            //总参-新增/编辑 提交表单
            handleSubmit(ref) {
                const self = this;
                this.$refs[ref].validate((valid) => {
                    if (valid) {
                        self.isLoading = true;
                        if (self.formObj.formModel.id) {
                            http.put("api/sysParam/updateParam", self.formObj.formModel).then(response => {
                                if (response.code === 200) {
                                    self.handleClose(ref)
                                    if (self.isMain) {
                                        self.loadPagination();
                                    } else {
                                        self.loadSubPagination();
                                    }
                                } else {
                                    this.$alert(response.msg, '提示', {type: 'warning'});
                                }
                            });
                        } else {
                            if (!self.isMain) {
                                self.formObj.formModel.parentCode = self.parentCode;
                            }
                            http.post("api/sysParam/addParam", self.formObj.formModel).then(response => {
                                if (response.code === 200) {
                                    self.handleClose(ref);
                                    if (self.isMain) {
                                        self.loadPagination();
                                    } else {
                                        self.loadSubPagination();
                                    }
                                } else {
                                    this.$alert(response.msg, '提示', {type: 'warning'});
                                }
                            });
                        }
                    }
                    self.isLoading = false;
                });
            },
            //总参-新增/编辑 关闭表单
            handleClose(ref) {
                this.formObj.isVisible = false;
                this.$refs[ref].resetFields();
            },

            // 计算表格高度
            initData() {
                let self = this;
                // 2.0版本特殊处理
                setTimeout(function () {
                    self.heightNum = self.utils.calcTableHeight();
                }, 10);
                // 响应窗口大小改变
                window.onresize = function () {
                    self.heightNum = self.utils.calcTableHeight();
                };
            },
        },
        mounted() {
            this.initData();
            this.loadPagination();
        }
    }
</script>
<style>
</style>
